<template>
  <div class="form">
    <el-dialog v-dialogDrag class="transferDialog" :close-on-press-escape = "true" :show-close = 'false' center :modal="false" title="分配列表" width="860px" :visible.sync="isShow" @close="cancel" :close-on-click-modal="false">
        <!--<el-card class="box-card" style="height: 100%">-->
        <!--表格渲染-->
        <el-tabs v-model="activeName" style="padding: 0" type="border-card"  @tab-click="handleClick">
          <el-tab-pane style="padding: 0" label="全部" name="null"></el-tab-pane>
          <el-tab-pane label="待确认" name="1"></el-tab-pane>
          <el-tab-pane label="已确认" name="2"></el-tab-pane>
          <el-tab-pane label="已发布" name="3"></el-tab-pane>
          <el-tab-pane label="拒绝" name="4"></el-tab-pane>
        </el-tabs>
        <el-table ref="table" border :data="data" size="mini" :height="tableHeight" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="40" align="center" />
          <el-table-column prop="name" width="140" align="center"  label="运输公司" show-overflow-tooltip />
          <el-table-column prop="freight" width="100" align="center" label="运费（元/吨）" show-overflow-tooltip />
          <el-table-column prop="allotNumber" width="90" align="center" label="分配数量" show-overflow-tooltip />
          <el-table-column prop="totalFreight" width="100" align="center" label="总运费" show-overflow-tooltip>
            <template slot-scope="scope">
              <span class="search-text1">{{scope.row.totalFreight | nullFilter}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="status" align="center" show-overflow-tooltip width="90" label="分配状态">
            <template slot-scope="scope">
              {{scope.row.status | cleanWayFilter }}
            </template>
          </el-table-column>
          <el-table-column prop="allotTime" align="center" show-overflow-tooltip label="分配时间">
            <template slot-scope="scope">
              <span>{{scope.row.allotTime}}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150"  align="center" v-if="this.activeName === '1' || this.activeName === 'null'">
            <template slot-scope="scope">
              <el-button
                size="mini"
                v-if="scope.row.status === 1"
                type="primary"
                @click="createBtnClick(scope.row)">修改</el-button>
              <el-popover v-model="pop" placement="top" width="180" trigger="manual" @show="onPopoverShow" @hide="onPopoverHide">
                <p>确定要取消该分配吗？</p>
                <div style="text-align: right; margin: 0">
                  <el-button size="mini" type="text" @click="doCancel">取消</el-button>
                  <el-button type="primary" size="mini" @click="doDelete(scope.row)">确定</el-button>
                </div>
                <el-button slot="reference" v-if="scope.row.status === 1" type="danger" size="mini" @click="toDelete">取消</el-button>
              </el-popover>
              <!--<el-button
                size="mini"
                v-if="scope.row.status === 1"
                type="danger"
                v-permission="['admin','orderMerchant:refuse']"
                @click="refuseBtnClick(scope.row)">取消</el-button>-->
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="sizeArray"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      <el-dialog
        width="435px"
        title="分配"
        :model="ruleForm" :rules="rules" ref="ruleForm"
        :visible.sync="innerVisible"
        @close="cancel1"
        append-to-body>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="mini">
        <el-card class="box-card">
          <el-row :gutter="24" v-if="this.updateFalg">
            <el-col :span="24">
              <div style="margin-top: 15px;">
                <el-input placeholder="请输入商户手机号" v-model="phone" clearable maxlength="11" @keyup.enter.native="toQueryInfo" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search" @click="toQueryInfo">搜 索</el-button>
                </el-input>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="24" v-if="this.falg">
            <div >
              <el-image
                style="float: left;width: 100px; height: 100px;margin: 13px"
                :src="matchData.doorImg"
                ></el-image>
              <div style="float: left;margin-left: 18px" >
                <div >
                  <p class="test">{{matchData.name}} </p>
                </div>
                <el-form-item label="运费" :label-width="formLabelWidth1" prop="freight">
                  <el-input v-model="ruleForm.freight" maxlength="5" style="width: 150px" clearable placeholder="请输入" >
                    <template slot="append">元/吨</template>
                  </el-input>
                </el-form-item>
                <el-form-item label="数量" :label-width="formLabelWidth1" prop="allotNumber">
                  <el-input v-model="ruleForm.allotNumber" maxlength="5" style="width: 150px" clearable placeholder="请输入" >
                    <template slot="append">吨</template>
                  </el-input>
                </el-form-item>
              </div>
            </div>
          </el-row>
            <p v-if="this.falg">
            <el-form-item label="总计" prop="totalFreight" style="text-align: right" label-width="270px">
              <span style="color: #FFBA00">{{ (ruleForm.freight == null ? 0: ruleForm.freight) * (ruleForm.allotNumber == null ? 0: ruleForm.allotNumber)}}</span>元
            </el-form-item>
            </p>
        </el-card>
        </el-form>
        <div slot="footer" style="text-align:right" class="dialog-footer">
          <!--<el-button type="info" size="mini" @click="innerVisible = false">取 消</el-button>-->
          <el-button style="width: 100%" type="primary"  size="mini" v-loading.fullscreen.lock="fullscreenLoading" @click="save">保 存</el-button>
        </div>
      </el-dialog>
      <div slot="footer" style="text-align:right" class="dialog-footer">
        <el-button type="info" size="mini" @click="cancel">取 消</el-button>
        <el-button type="primary" size="mini" v-loading.fullscreen.lock="fullscreenLoading" @click="innerVisible = true">分 配</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import MyImg from '@/components/img/img'
export default {
  name: 'DriverStaff',
  props: ['showFormPanel', 'item'],
  data() {
    return {
      pop: false,
      phone: null,
      activeName: '1',
      size: this.pageSize,
      sizeArray: [10, 20, 50, 100],
      tableHeight: window.innerHeight - 400,
      page: 1,
      total: 0,
      loading: false,
      innerVisible: false,
      data: [],
      showOperation: false,
      fullscreenLoading: false,
      ruleForm: {},
      falg: false,
      updateFalg: true,
      orderIdItem: this.item,
      formLabelWidth1: '60px',
      isShow: this.showFormPanel,
      matchData: {},
      rules: {
        freight: [
          { required: true, message: '请输入运费', trigger: 'blur' }
        ],
        allotNumber: [
          { required: true, message: '请输入分配数量', trigger: 'blur' }
        ],
      }
    }
  },
  filters: {
  },
  methods: {
    doCancel() {
      this.pop = false
    },
    doDelete(val) {
      let self = this
      debugger
      self.$http.post("/api/orderMerchant/delete" , {id: val.orderAllotTransportId}).then(function(value) {
        if (value.ok){
          self.handleClick()
        }
      })
    },
    toDelete() {
      this.pop = true
    },
    onPopoverShow() {
      setTimeout(() => {
        document.addEventListener('click', this.handleDocumentClick)
      }, 0)
    },
    onPopoverHide() {
      document.removeEventListener('click', this.handleDocumentClick)
    },
    handleDocumentClick(event) {
      this.pop = false
    },
    toQueryInfo() {
      let self = this
      if (!self.phone || self.phone.length != 11){
        self.$message({
          message: '请输入11位手机号',
          type: 'warning'
        })
        return
      }
      self.$http.get("/api/orderMerchant/findUser?phone=" + self.phone).then(function(value) {
        if (value.ok){
          if (!value.data.name) {
            self.falg = false
            self.$message({
              message: '没有搜索该运输公司',
              type: 'warning'
            })
            return
          }
          self.falg = true
          self.matchData = value.data
        }
      })
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleSizeChange (val) {
      this.size = val
      this.search()
    },
    handleCurrentChange (val) {
      this.page = val
      this.search()
    },
    createBtnClick (val) {
      this.innerVisible = true
      this.falg = true
      this.updateFalg = false
      this.ruleForm = val
      this.matchData = val
    },
    handleClick() {
      let self = this
      let par = {
        orderId: self.orderIdItem,
        status: self.activeName
      }
      const page = self.page > 0 ? self.page - 1 : self.page
      par.direction = 'DESC'
      par.page = page
      par.property = 'allot_time'
      par.size = self.size
      self.$http.post('/api/orderMerchant/allocationList', par)
        .then(function(res) {
          self.fullscreenLoading = false
          if (res.ok) {
            self.data = res.data.content
            self.total = res.data.totalElements
            self.totalPage = res.data.totalPages
          }
        }).catch(function(error) {
          self.fullscreenLoading = false
          console.log(error)
        })
    },
    save() {
      let self = this
      let url = 'add'
      if (self.ruleForm.orderAllotTransportId != null) {
        url = 'update'
      }
      if (!self.falg) {
        self.$message({
          message: '请先查找运输公司',
          type: 'warning'
        })
        return
      }
      let par = {
        orderAllotTransportId: self.ruleForm.orderAllotTransportId,
        transportUserId: self.matchData.id,
        orderId: self.orderIdItem,
        freight: self.ruleForm.freight,
        allotNumber: self.ruleForm.allotNumber
      }
      self.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          self.$http.post('/api/orderMerchant/' + url, par)
            .then(function(res) {
              self.fullscreenLoading = false
              self.cancel1()
              self.handleClick()
            }).catch(function(error) {
              self.fullscreenLoading = false
              console.log(error)
          })
        }
      })
    },
    cancel() {
      this.isShow = false
      this.$emit('update:showFormPanel', this.isShow)
    },
    cancel1() {
      this.ruleForm = {}
      this.matchData = {}
      this.phone = null
      this.innerVisible = false
      this.falg = false
      this.updateFalg = true
    }
  },
  mounted: function() {
    this.handleClick()
  },
  components: {
    MyImg
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.test {
  font-size: 13px;
  color: #606266;
  line-height: 15px;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: bold;
}
.el-tabs {
  margin-bottom: 0 !important;
}
.el-tabs--border-card>.el-tabs__content {
  padding: 5px !important;
}
.qqq {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: bold;
}
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 15px;
}
.mark-body{
  position:fixed;
  left:0px;
  top:0px;
  background:rgba(0, 0, 0, 0.18);
  width:100%;  /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
  height:100%;
  filter:alpha(opacity=60);  /*设置透明度为60%*/
  opacity:0.6;  /*非IE浏览器下设置透明度为60%*/
  z-Index:999;
}
aside {
  /* background: #eef1f6; */
  /* padding: 6px 5px; */
  background: none;
  padding: 0px 24px;
  margin-bottom: 1px;
  border-radius: 2px;
  display: block;
  /* line-height: 50px; */
  /* font-size: 48px; */
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",sans-serif;
  color: #2c3e50;
  /* -webkit-font-smoothing: antialiased; */
  -moz-osx-font-smoothing: grayscale;
}
</style>
